﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        <span>---1级---</span>
        <select name="keyword-1">
            <option>编程开发语言</option>
            <option>工具软件</option>
            <option>顾问咨询</option>
            <option>操作系统</option>
        </select>
        <span>---2级---</span>
        <span name="keyword-2">
        </span>
        <span>定向求助</span>
        <input type="text" value="" id="orientation-problem" />
        <div id="relationuser"></div>
        <button type="button" id="refresh">刷新</button>
       <div id="bmoney">2000帮帮币</div>
    </form>
    <script>
        //根据Ajax动态加载导航栏下的“新消息”

        //分别通过iframe和Ajax完成侧边栏关键字“换一批”的功能

        //能通过Json获得（有无未读消息的）数据，决定是否闪烁铃铛图标（注意：要能闪还能不闪）
        //发布求助时，能够
        //根据一级关键字，通过Ajax获取到该一级关键字下的二级关键字，并予以显示
        document.getElementsByName("keyword-1")[0].onclick = function (event) {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "/secondkeyword.html?id=8");
            xhttp.send();
            if (this.selectedOptions[0].innerText == "工具软件") {
                xhttp.onload = function () {
                    document.getElementsByName("keyword-2")[0].innerHTML = xhttp.response;

                }

            }
        }


        //定向求助时移出焦点，就能找到相关用户
        document.getElementById("orientation-problem").onmouseout = function (event) {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "/relationuser.html?id=8");
            xhttp.send();
            xhttp.onload = function () {
                document.getElementById("relationuser").innerHTML = xhttp.response;
            }
        }
        //刷新帮帮币
        document.getElementById("refresh").onclick = function () {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "/Bmoney.html?id=8");
            xhttp.send();
            xhttp.onload = function () {
                document.getElementById("bmoney").innerHTML = xhttp.response;
            }

        }
    </script>
</body>
</html>